<template>
  <div class="body">
    <div style="font-size: 50px">商品展示区</div>
    <div class="first" v-for="(item, index) in publishList" :key="index">
      <div class="box">
        <img :src="item.img" @click="goodinfo(item)" />
        <p class="review">{{ item.introduction }}</p>
        <div class="appraise">来自于 {{ item.username }} 的商品</div>
        <div class="info">
          <h4 class="good">商品:{{ item.name }}</h4>
          <em style="float: left">|</em>
          <span style="float: left">价格:{{ item.price }}元</span>
        </div>
      </div>
    </div>
    <div style="font-size: 50px">需求展示区</div>
    <div class="second">
      <div class="first" v-for="(item, index) in requestList" :key="index">
        <div class="box">
          <img
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            @click="requestinfo(item)"
          />
          <p class="review">{{ item.introduction }}</p>
          <div class="appraise">来自于 {{ item.username }} 的需求</div>
          <div class="info">
            <h4 class="good">商品:{{ item.name }}</h4>
            <em style="float: left">|</em>
            <span style="float: left">期望价格:{{ item.price }}元</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      publishList: [],
      requestList: [],
    };
  },
  methods: {
    goodinfo(good) {
      this.$store.commit("setGood", good);
      this.$router.push("goodinfo");
    },
    requestinfo(request) {
      this.$store.commit("setRequest", request);
      this.$router.push("requestinfo");
    },
    init() {
      console.log("refresh");
      this.$http.get("getEightGoods").then((res) => {
        if (res.data.success === true) {
          var keymap = {
            gid: "goodid",
            uid: "userid",
            imgDir: "img",
            inventory: "num",
            goodsDesc: "introduction",
          };
          for (var i = 0; i < res.data.goods.length; i++) {
            var obj = res.data.goods[i];
            for (var key in obj) {
              var newkey = keymap[key];
              if (newkey) {
                obj[newkey] = obj[key];
                delete obj[key];
              }
            }
          }
          this.publishList = res.data.goods;
        } else {
          this.$message.error("加载失败,请重新加载!");
        }
      });
      this.$http.get("getEightRequest").then((res) => {
        if (res.data.success === true) {
          var keymap = {
            prefPrice: "price",
            uid: "userid",
            reqDesc: "introduction",
            rid: "requestid",
            title: "name",
            offerTime: "date",
          };
          for (var i = 0; i < res.data.request.length; i++) {
            var obj = res.data.request[i];
            for (var key in obj) {
              var newkey = keymap[key];
              if (newkey) {
                obj[newkey] = obj[key];
                delete obj[key];
              }
            }
          }
          for (var i = 0; i < res.data.request.length; i++) {
            res.data.request[i].date = this.convertTime(
              parseInt(res.data.request[i].date)
            );
          }
          this.requestList = res.data.request;
        } else {
          this.$message.error("加载失败,请重新加载!");
        }
      });
    },
  },
  created() {
    this.init();
    // setInterval(this.init(), 10000);
  },
};
</script>


<style lang="less" scoped>
.body {
  overflow: hidden;
  width: 60%;
  margin: 0 auto;
  height: 100%;
}
.box {
  border-radius: 20px;
  float: left;
  width: 298px;
  height: 415px;
  background-color: #fff;
  /* 让块级的盒子水平居中对齐 */
  margin: 30px 10px;
}
.box img {
  /* 图片的宽度和父亲一样宽 */
  border-radius: 20px 20px 0 0;
  width: 100%;
}
.review {
  height: 70px;
  font-size: 14px;
  /* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */
  padding: 0 28px;
  margin-top: 30px;
}
.appraise {
  font-size: 12px;
  color: #b0b0b0;
  margin-top: 20px;
  padding: 0 28px;
}
.info {
  font-size: 14px;
  margin-top: 15px;
  padding: 0 28px;
}
.info h4 {
  display: inline-block;
  font-weight: 400;
}
.info span {
  color: #ff6700;
}
.info em {
  font-style: normal;
  color: #ebe4e0;
  margin: 0 6px 0 15px;
}
.good {
  margin: 0;
  float: left;
  width: 1250px;
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>